<template>
    <div class="about">
      <my-header>装修流程</my-header>
        <div class="top"><img
                src="../../public/process/process1.jpg"
                alt=""
            >
        </div>
        <div class="middle">
            <span class="middleTitle1">【装修前】</span>
            <span class="middleTitle2">NO.1 收房验房</span>
            <span class="middleTitle3">NO.2 装修预算</span>
            <span class="middleTitle4">NO.3 装修风水</span>
            <span class="middleTitle5">NO.4 装修设计</span><img
                src="../../public/process/process2.jpg"
                alt=""
            ></div>
        <div class="bottom">
            <span class="bottomTitle1">【装修中】</span>
            <span class="bottomTitle2">NO.5 材料选择</span>
            <span class="bottomTitle3">NO.6 水电工程</span>
            <span class="bottomTitle4">NO.7 泥木工程</span>
            <span class="bottomTitle5">NO.8 油漆工程</span>
            <img
                src="../../public/process/process3.png"
                alt=""
            ></div>
        <div class="footer">
            <span class="footerTitle1">【装修后】</span>
            <span class="footerTitle2">NO.9 装修验房</span>
            <span class="footerTitle3">NO.10 去污保洁</span>
            <span class="footerTitle4">NO.11 软装搭配</span>
            <span class="footerTitle5">NO.12 家具生活</span>
            <img
                src="../../public/process/process4.jpg"
                alt=""
            ></div>
            <my-buttom></my-buttom>
    </div>
</template>
<script>
import myHeader from '@/components/myHeader'
import myButtom from '@/components/Bottom'
export default {
  data() {
    return {};
  },
  components:{
    myHeader,
    myButtom,
  },
  created() {},
  methods: {}
};
</script>
<style scoped lang="scss">
.about {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 130px;
    margin-top: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .middle {
    width: 100%;
    height: 450px;
    position: relative;
    .middleTitle1 {
      position: absolute;
      top: 23px;
      left: 48px;
      font-size: 21px;
      color: #ff4351;
    }
    .middleTitle2 {
      position: absolute;
      top: 100px;
      left: 91px;
    }
    .middleTitle3 {
      position: absolute;
      top: 181px;
      left: 176px;
    }
    .middleTitle4 {
      position: absolute;
      top: 264px;
      left: 91px;
    }
    .middleTitle5 {
      position: absolute;
      top: 348px;
      left: 179px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bottom {
    width: 100%;
    height: 450px;
    position: relative;
    .bottomTitle1 {
      position: absolute;
      top: 23px;
      left: 221px;
      color: #69b9f7;
      font-size: 21px;
    }
    .bottomTitle2 {
      position: absolute;
      top: 98px;
      left: 176px;
      
    }
    .bottomTitle3 {
      position: absolute;
      top: 185px;
      left: 95px;
      
    }
    .bottomTitle4 {
      position: absolute;
      top: 263px;
      left: 178px;
      
    }
    .bottomTitle5 {
      position: absolute;
      top: 344px;
      left: 91px;
     
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .footer {
    width: 100%;
    height: 450px;
    position: relative;
    .footerTitle1{
        position: absolute;
        top: 20px;
        left: 48px;
        font-size: 21px;
      color: #69b9f7;

    }
     .footerTitle2{
        position: absolute;
        top: 89px;
        left: 92px;
    }
     .footerTitle3{
        position: absolute;
        top: 164px;
        left: 171px;
    }
     .footerTitle4{
        position: absolute;
        top: 238px;
        left: 91px;
    }
     .footerTitle5{
        position: absolute;
        top: 312px;
        left: 174px;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
